<script setup lang="ts">
import { ref, watch } from 'vue'

interface Props {
  minDesc: string
  maxDesc: string
  active: boolean
  scaleX: number
}
const props = withDefaults(defineProps<Props>(), {
  active: false,
  scaleX: 0
})

const barLengthRef = ref<HTMLDivElement | null>(null)

watch(
  () => props.active,
  (newValue) => {
    if (barLengthRef.value) {
      barLengthRef.value.style.transform = `scaleX(${newValue ? props.scaleX : '0'})`
    }
  }
)
</script>

<template>
  <div class="bar-container">
    <div class="min-max">
      <div class="min">{{ minDesc }}</div>
      <div class="max">{{ maxDesc }}</div>
    </div>
    <div :class="['bar', { active: active }]">
      <div ref="barLengthRef" class="length"></div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.bar-container {
  padding: 10px;
  .min-max {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
  }

  .bar {
    margin-top: 10px;
    width: 100%;
    height: 10px;
    border-radius: 5px;
    background: #dde;
    // 隐藏after元素超出border-radius的效果
    overflow: hidden;
    position: relative;

    .length {
      position: absolute;
      top: 0;
      width: 100%;
      height: 10px;
      transform-origin: 0 50%;
      transform: scaleX(0);
      background-color: #7dd0ed;
      transition: all 0.2s ease-in-out;
    }
  }
}
</style>
